<template>
<div class="my_info_box">


  <div class="card">
    <h3 style="margin-top: 10px">用户中心</h3>
    <avatar></avatar>
    <div class="circle"></div>
    <div class="circle2"></div>
    <div class="circle3"></div>
  </div>
  <div class="collection">
    <div class="left">
      <span>0</span>
      <span><van-icon name="star-o" />我的收藏</span>
    </div>
    <div class="right">
      <span>0</span>
      <span><van-icon name="guide-o" />我的路径</span>
    </div>
  </div>
  <order></order>
  

</div>
</template>

<script>
import Order from "@/components/Order";
import Avatar from "@/components/Avatar";
export default {
  name: "MyInfoView",
  components:{
    Order,
    Avatar
  },
  data(){
    return{
      curCode: '测试',
      cmOptions: {
        // autorefresh: true,
        // tabSize: 4,
        // mode: 'text/x-properties',
        // theme: 'ayu-mirage',
        // line: true,
        // viewportMargin: Infinity, //处理高度自适应时搭配使用
        // highlightDifferences: true,
        // autofocus: false,
        // indentUnit: 2,
        // smartIndent: true,
        // readOnly: true, // 只读
        // showCursorWhenSelecting: true,
        // firstLineNumber: 1
        lineNumbers: true, // 显示行号
        mode: 'text/x-yaml', // 语法model
        gutters: ['CodeMirror-lint-markers'], // 语法检查器
        theme: "ambiance",
        lint: true, // 开启语法检查
      }
    }
  }
  
}
</script>

<style scoped lang="less">
.card{
  width: 100%;
  height: 250px;
  background: linear-gradient(to bottom, rgb(255, 67, 66), rgb(229, 145, 131));
  z-index: -1;
  overflow: hidden;
}
.circle{
  position: absolute;
  width: 200px;
  height: 200px;
  background-color: rgb(254, 123, 97);
  border-radius: 100%;
  left: -80px;
  top: -50px;
  opacity: 0.1;
  border: 1px solid white;
}
.circle2{
  position: absolute;
  width: 200px;
  height: 200px;
  background-color: rgb(254, 123, 97);
  border: 1px white solid ;
  border-radius: 100%;
  right: 0px;
  opacity: 0.2;
  top: 10px;
}

.circle3{
  position: absolute;
  width: 150px;
  height: 150px;
  background-color: rgb(254, 123, 97);
  border: 1px white solid ;
  border-radius: 100%;
  opacity: 0.1;
  left: -80px;
  top: 75px;
  z-index: 1;
}
.collection{
  width: 100%;
  height: 90px;
  //background-color: white;
  //border: 1px black solid;
  position: absolute;
  top: 120px;
  display: flex;
  z-index: 10;
  //border-radius: 10px;
}
.left,.right{
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.left{
  //border-right: 1px solid black;
}
.collection::before {
  
  content: "";
  width: 1px; /* 设置竖线的宽度 */
  height: 40px; /* 设置竖线的高度，根据你的需求调整 */
  background-color: white; /* 设置竖线的颜色 */
  position: absolute;
  top: 25px; /* 调整竖线的垂直位置，使它在两个盒子的正中间 */
  left: 50%; /* 设置竖线的水平位置在父容器中间 */
  transform: translateX(-50%); /* 调整水平位置使竖线居中 */
  z-index: 5; /* 确保竖线在左右盒子之间 */
  
  //content: "";
  //width: 1px;
  //height: 40px;
  //background-color: #000;
  //margin: 20px 141px;
  //position: absolute;
  //top: 10px;
  //z-index: 5;
  //content: "";
  //width: 1px; /* 设置竖线的宽度 */
  //height: 70px; /* 设置竖线的高度，根据你的需求调整 */
  //background-color: #000; /* 设置竖线的颜色 */
  //margin: 0 10px; /* 调整竖线与左右盒子的间距 */
  //position: absolute;
  //top: 10px; /* 调整竖线的垂直位置，使它与左右盒子对齐 */
  //z-index: 5; /* 确保竖线在左右盒子之间 */
}

span{
  color:white;
}
//.order{
//  width: 93%;
//  height: 66px;
//  margin: -35px auto;
//  position: relative;
//  z-index: 2;
//  border-radius: 8px;
//  background-color: white;
//  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
//}
h3{
  margin: 0 0;
  padding: 0 0;
}
</style>
